<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>PyCairo backends</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="PyCairo, graphics, backends, PNG, PDF, SVG, GTK">
<meta name="description" content="In this part of the PyCairo tutorial, we will
cover the PyCairo backends.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container2">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content2">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>PyCairo backends</h1>


<p>
PyCairo supports various backends. Backends are places where the
graphics produced by PyCairo can be displayed. We will use PyCairo 
to create a PNG image, a PDF file, a SVG file and we will draw on a 
GTK window.
</p>

<div class="big_hor">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* big_horizontal */
google_ad_slot = "2904953388";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>


<h2>PNG image</h2>

<p>
In the first example, we will create a PNG image.
</p>

<pre class="code">
#!/usr/bin/python

'''
ZetCode PyCairo tutorial 

This program uses PyCairo to 
produce a PNG image.

author: Jan Bodnar
website: zetcode.com 
last edited: August 2012
'''

import cairo
       
    
def main():
    
    ims = cairo.ImageSurface(cairo.FORMAT_ARGB32, 390, 60)
    cr = cairo.Context(ims)
    
    cr.set_source_rgb(0, 0, 0)
    cr.select_font_face("Sans", cairo.FONT_SLANT_NORMAL,
        cairo.FONT_WEIGHT_NORMAL)
    cr.set_font_size(40)
    
    cr.move_to(10, 50)
    cr.show_text("Disziplin ist Macht.")

    ims.write_to_png("image.png")
        
        
if __name__ == "__main__":    
    main()
</pre>

<p>
This example is a small console application that will create a PNG image.
</p>

<pre class="explanation">
import cairo
</pre>

<p>
We import the PyCairo module. 
</p>


<pre class="explanation">
ims = cairo.ImageSurface(cairo.FORMAT_ARGB32, 390, 60)
cr = cairo.Context(ims)
</pre>

<p>
We create a surface and a Cairo context from the surface. The surface is 
a 390x60px image.
</p>

<pre class="explanation">
cr.set_source_rgb(0, 0, 0)
</pre>

<p>
We will draw our text in black ink.
</p>


<pre class="explanation">
cr.select_font_face("Sans", cairo.FONT_SLANT_NORMAL,
    cairo.FONT_WEIGHT_NORMAL)
cr.set_font_size(40)
</pre>

<p>
We choose a font type and set its size.
</p>

<pre class="explanation">
cr.move_to(10, 50)
cr.show_text("Disziplin ist Macht.")
</pre>

<p>
We move to a x=10.0, y=50.0 position within the 
image and draw the text. 
</p>

<pre class="explanation">
ims.write_to_png("image.png")
</pre>

<p>
This method call creates the PNG image.
</p>

<img src="/img/gfx/pycairo/pngfile.png" alt="PNG image in Eye of Gnome">
<div class="figure">Figure: PNG image in Eye of Gnome</div>


<h2>PDF file</h2>

<p>
In the second example, we create a simple PDF file.
</p>

<pre class="code">
#!/usr/bin/python

'''
ZetCode PyCairo tutorial 

This program uses PyCairo to 
produce a PDF image.

author: Jan Bodnar
website: zetcode.com 
last edited: August 2012
'''

import cairo
       
    
def main():
    
    ps = cairo.PDFSurface("pdffile.pdf", 504, 648)
    cr = cairo.Context(ps)
    
    cr.set_source_rgb(0, 0, 0)
    cr.select_font_face("Sans", cairo.FONT_SLANT_NORMAL,
        cairo.FONT_WEIGHT_NORMAL)
    cr.set_font_size(40)
    
    cr.move_to(10, 50)
    cr.show_text("Disziplin ist Macht.")
    cr.show_page()
        
        
if __name__ == "__main__":    
    main()
</pre>

<p>
We must open the pdf file in a pdf viewer. Linux users can use KPDF or Evince viewers.
</p>

<pre class="explanation">
ps = cairo.PDFSurface("pdffile.pdf", 504, 648)
</pre>

<p>
To render a pdf file, we must create a pdf surface using the 
<code>cairo.PDFSurface</code> object.
The size of the pdf file is specified in points, which is a standard 
in typesetting. 
</p>

<pre class="explanation">
cr.show_page()
</pre>

<p>
The <code>show_page()</code> finishes rendering of the pdf file.
</p>

<img src="/img/gfx/pycairo/pdffile.png" alt="PDF file in Evince">
<div class="figure">Figure: PDF file in Evince</div>


<h2>SVG file</h2>

<p>
The next example creates a simple SVG (Scalable Vector Graphics) file. 
A SVG file is a XML based file format.
</p>

<pre class="code">
#!/usr/bin/python

'''
ZetCode PyCairo tutorial 

This program uses PyCairo to 
produce a SVG file.

author: Jan Bodnar
website: zetcode.com 
last edited: August 2012
'''

import cairo
       
    
def main():
    
    ps = cairo.SVGSurface("svgfile.svg", 390, 60)
    cr = cairo.Context(ps)
    
    cr.set_source_rgb(0, 0, 0)
    cr.select_font_face("Sans", cairo.FONT_SLANT_NORMAL,
        cairo.FONT_WEIGHT_NORMAL)
    cr.set_font_size(40)
    
    cr.move_to(10, 50)
    cr.show_text("Disziplin ist Macht.")
    cr.show_page()
        
        
if __name__ == "__main__":    
    main()
</pre>

<p>
We can use a web browser like Google Chrome or a vector drawing program
like Inkscape to open a SVG file. 
</p>

<pre class="explanation">
ps = cairo.SVGSurface("svgfile.svg", 390, 60)
</pre>

<p>
To create a SVG file in PyCairo, we must create a svg surface using the 
<code>cairo.SVGSurface</code> object.
</p>

<pre class="explanation">
cr.show_page()
</pre>

<p>
The <code>show_page()</code> method call finisheds rendering of
the SVG file.
</p>


<img src="/img/gfx/pycairo/svgfile.png" alt="SVG file in Chrome">
<div class="figure">SVG file in Chrome</div>


<h2>GTK Window</h2>

<p>
In the last example, we will draw on a GTK window. This backend will be used 
throughout the rest of the tutorial.
</p>

<pre class="code">
#!/usr/bin/python

'''
ZetCode PyCairo tutorial 

This program uses PyCairo to 
draw on a window in GTK.

author: Jan Bodnar
website: zetcode.com 
last edited: August 2012
'''


from gi.repository import Gtk
import cairo


class Example(Gtk.Window):

    def __init__(self):
        super(Example, self).__init__()
        
        self.init_ui()
        
        
    def init_ui(self):    

        darea = Gtk.DrawingArea()
        darea.connect("draw", self.on_draw)
        self.add(darea)

        self.set_title("GTK window")
        self.resize(420, 120)
        self.set_position(Gtk.WindowPosition.CENTER)
        self.connect("delete-event", Gtk.main_quit)
        self.show_all()
        
    
    def on_draw(self, wid, cr):

        cr.set_source_rgb(0, 0, 0)
        cr.select_font_face("Sans", cairo.FONT_SLANT_NORMAL,
            cairo.FONT_WEIGHT_NORMAL)
        cr.set_font_size(40)
        
        cr.move_to(10, 50)
        cr.show_text("Disziplin ist Macht.")
        
    
def main():
    
    app = Example()
    Gtk.main()
        
        
if __name__ == "__main__":    
    main()
</pre>

<p>
The example pops up a centered GTK window, on which we draw 
the "Disziplin ist Macht" text.
</p>

<pre class="explanation">
from gi.repository import Gtk
import cairo
</pre>

<p>
We import the necessary PyCairo and GTK modules.
</p>

<pre class="explanation">
darea = Gtk.DrawingArea()
</pre>

<p>
We will be drawing on a <code>Gtk.DrawingArea</code> widget.
</p>

<pre class="explanation">
darea.connect("draw", self.on_draw)
</pre>

<p>
When the window is redrawn, a <code>draw</code> signal is emitted. 
We connect that signal to the <code>on_draw()</code> callback.
</p>

<pre class="explanation">
def on_draw(self, wid, cr):
...
</pre>

<p>
The drawing is done inside the on_draw() method. The third parameter is 
the cairo context. It is automatically available
to us. The Cairo library is built into the GTK system.
</p>

<img src="/img/gfx/pycairo/gtkwindow.png" alt="GTK window">
<div class="figure">Figure: GTK window</div>

<p>
In this chapter we have covered supported PyCairo backends.
</p>


<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div>
<br>



<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified August 21, 2012  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>


